Microwave SVG animation examples using SMIL, Javascript and CSS

SVG inkscape animation of a microwave and a package of tomato basil soup implemented using SMIL.

    This page is about creating stand along SVG files that animate without the use of external libraries or additional HTML coding in the webpage. We will be looking at animating the file by SMIL, JavaScript and CSS (Cascading Style Sheets). And also using aniGen to change the SMIL animated SVG into a GIF. Each method has its advantages and disadvantages. And we will briefly talk about a fallback image in case the animation method we are using will not work or is not supported by the end-users browser.

    The SVG image to be animated is that of a simple microwave with a turntable and a package of tomato basil soup. The turntable will be animated along with the package of tomato basil soup and the light source of the microwave. These effects are done using animateTransform in SMIL on the types elements rotate, translate and scale. And thier equivalent functions in CSS and Javascript.

    The simplest way to have a fallback image, in case none of the animation methods used work, is to have the starting position of the animation to be a desirable still image.

Made using SMIL to animate a SVG.
SVG inkscape animation of a microwave and a package of tomato basil soup implemented using SMIL. File: microwave SMIL.svg
    Works fine with the img tag in Chrome and Firefox. But will not work at all in Internet Explorer or Microsoft Edge.

Using CSS to animate a SVG.
SVG inkscape animation of a microwave and a package of tomato basil soup implemented using CSS. File: microwave CSS.svg
    The great thing about CSS is that it will work across all the major browsers with the img tag, including Internet Explorer and Microsoft Edge. The drawback is CSS does not currently have a built-in transform on the D element, as in SMIL.
Finally let's look at using JavaScript.

Using Javascript to animate a SVG.
Open standalone animation in new tab.

    To animate the microwave only three javaScript functions needed to be added to the SVG file.
1) animateRotate() to turn the turntable.
2) animateTranslate() to move the clipped label from left to right.
3) And animateScale() which scales the light source up and down.

    So, a major advantage of using JavaScript is it will work in all browsers. But Internet Explorer may throw an error message requesting use of active X controls. But there are a few minor drawbacks using JavaScript to animate the SVG image. One is a bit of code needs to be added to the SVG file to allow the browser to size the image. Namely preserveAspectRatio and viewBox needs to be added to the main SVG tag. In inkscape, this is accomplished by using the XML Editor.
Image of the XML editor in Inkscape showing the extra lines of code needed to implement scaling within an HTML page.
    So,adding javaScript to an SVG file in Inkscape is relatively simple. From the main menu bar go to Edit. And click on XML editor at the bottom of the drop down list. Once the XML editor has opened up. Go to the top level of your document.(I normally use the first layer of the document. Which is svg:g id="layer1"). Highlight the layer in the editor.Then go to new element nodes button which is marked XML and select it. A small dialog box will then open and you simply type in "svg:script" and then select the create button. A new SVG node will be created in the document with an unique i.d. Next go to new text node button which is labeled abc. Click the button and a new text node will be created under your new SVG script node. By selecting the text node you will be able to add your javaScript to your SVG file in Inkscape.
javascript used to implement anmation.
    The second minor issue is that you have to use the embed or object tag in HTML in order for the JavaScript animation to play. The stand along SVG file will play in all the browsers.
    The third and most important issue is of course you will have to learn JavaScript. There are javascript libraries for manipulating and animating SVG files, but then your SVG file will be dependent on the libraries.

Creating a GIF from a SVG/SMIL animation.
Open gif animation in new tab.

    So, let's get started in change this SMIL animation into a gif. There is a workflow we are going to have to follow. A lot of it is dependent upon the picky nature of aniGen and gimp. There are three simple steps to follow.
1) The first is to create a SMIL/SVG animation in Inkscape. Which we have already done in the first step of this tutorial.
2) The second is to go to http://anigen.org/versions/0_8_1/ and load the animation into aniGen.
3) Using aniGen export the animation at 25 frames per second.
4) Import the frames into GIMP and then export as a GIF.

    So, a major advantage of having a gif is it will work in all browsers. But the file size of the the resultng gif produced will of course be much larger than the methods above. A major drawback is the time needed to create the gif and that it wil not be scalable without quality degradation. So careful consideration must be paid to desired resoution of the the resulting gif.
    The SML/SVG, CSS and Javascript versions have a file size around 120 KB and the GIF version has a file size of 3 MB. Yet the GIF version is set at a width of 400 and a hieght of 300.
    The most important issue is of course you will have to learn both aniGen and GIMP. It should be carefully noted that aniGen use frames per second. While GIMP use delay between frames. So 25 frames per second in aniGen is the same as a delay of 40 miliseconds in GIMP.
    Now aniGen will allow the animation on the 'd' attribute as long as the SMIL animate tag includes a properly formatted keyTimes.

Made using SMIL to animate a SVG.
    So, what if you want to do a more complex animation? For example what if you want to animate the D element of a path. In other words interpolate between a series of d paths for a element. SMIL allows this by doing an animate on the the attributeName d. How about a frame-by-frame animation using SMIL?
    Well, the example below can help give you some ideas on how to achieve this and then change the SMIL/SVG animation into a gif by using aniGen and GIMP. This example uses frame by frame animation to achieve the head turn. And the movement on the arms by modifying the d path for both arms.
    I call this animation "Eat your broccoli !!!"

Open SMIL/SVG animation in new tab. 		Using aniGen and GIMP

Links

  Doodle Scenes:    
  Chinese Puppet Show  Gone Fishin'... It's a Bee's Life
Grim Reaper